<template>
  <div class="head-warp">
    <div class="iconfont head-item left">&#xe66a</div>
    <div class="head-item middle">
      <div class="header-search">
        <span class="header-search-icon iconfont">&#xe612;</span>
        <span class="header-search-hint">输入城市或景点</span>
      </div>
    </div>
    <div class="head-item right">
      <!-- 呼和浩特市-->
      <router-link to="/city">
        <div class="header-city-btn" style="color: #fff;">
          {{this.$store.getters.cityName}}
        </div>
      </router-link>
      <div class="header-city-icon iconfont">&#xe623;</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Header',
    mounted() {
      // 访问getter this.$store.getters.cityName
      // 访问state this.$store.state.a.city 
      // this.$store.state.b.city
    }
  }
</script>

<style lang="stylus" scoped>
  .head-warp {
    width: 100%;
    height: .88rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: #17c0c8;

    .head-item {
      height: .88rem;
      line-height: .88rem;
    }

    /*
    返回按钮
    */
    & .left {
      position: relative;
      width: .8rem;
      height: .88rem;
      color: #FFFFFF;
    }

    /*
    搜索框
    */
    & .middle {
      width: 100%;
      height: .88rem;

      .header-search {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: .78rem;
        background-color: #FFFFFF;
        border-radius: .05rem;
        margin: .05rem auto 0;

        .header-search-icon {
          display: inline-block;
          width: .78rem;
          height: .78rem;
          color: #000000;
          font-size: 25px;
        }

        .header-search-hint {
          display: inline-block;
          height: .78rem;
          line-height: .78rem;
          margin-left: .2rem;
          font-weight: bold;
          color: gray;
        }

      }
    }

    /*
    城市定位
    */
    & .right {
      width: 2rem;
      display: flex;
      justify-content: space-between;
      /* overflow:hidden; */
      height: .88rem;

      div {
        color: #FFFFFF;
      }

      .header-city-btn {
        width: 1.5rem;
        height: .88rem;
      }

      .header-city-icon {
        height: .88rem;
      }

    }

  }
</style>
